<template>
  <div class="silder-nav">
    <div class="main-header">
      <el-button type="primary"
                 class="main-header__button"
                 @click="toggleCollapsed">
        <i :class="$store.state.collapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
           :style="{fontSize: '24px'}" />
      </el-button>

      <div class="breadcrumb">
        <el-breadcrumb v-if="currentRoute.length > 1">
          <el-breadcrumb-item>
            {{ currentRoute[0] ? currentRoute[0].meta.title : '' }}
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <router-link :to="{name: currentRoute[1].name}">
              {{ currentRoute[1] ? currentRoute[1].meta.title : '' }}
            </router-link>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>

    <div class="user-info"
         @mouseover="showLogout = true"
         @mouseleave="showLogout = false">
      <div class="user-info-name">
        {{ $store.state.user.username }}
        <i class="el-icon-arrow-down" />
      </div>
      <div v-if="showLogout"
           class="user-info-logout"
           @click="logout">
        退出
      </div>
    </div>
  </div>
</template>

<script>
export default {
  watch: {
    $route () {
      this.currentRoute = this.$router.currentRoute.matched
    }
  },
  data () {
    return {
      currentRoute: this.$router.currentRoute.matched,
      showLogout: false
    }
  },
  methods: {
    toggleCollapsed () {
      this.$store.dispatch('changeCollapsed')
    },
    logout () {
      this.$store.dispatch('logout')
      localStorage.removeItem('token')
      localStorage.removeItem('username')
      localStorage.removeItem('menuRoutes')
      this.$router.push({
        name: 'Login'
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '../assets/css/index.less';

.silder-nav {
  height: 50px;
  .main-header {
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #fff;
    border-bottom: 1px solid #000;
    padding-left: 10px;
    padding-right: 64px;
    .flex-start;

    &__button {
      padding: 4px 8px;
    }
    .breadcrumb {
      display: inline-block;
      margin-left: 20px;
    }
  }
}

.user-info {
  position: fixed;
  top: 0;
  right: 0;
  width: 100px;
  z-index: 100;
  & > div {
    cursor: pointer;
    height: 50px;
    .flex-center;
  }
  &-name {
    i {
      margin-left: 6px;
    }
  }
  &-logout {
    border: 1px solid #eee;
    border-top: none;
    background: #409eff;
    color: #fff;
    font-size: 20px;
    font-family: '楷体';
    &:hover {
      background-color: rgba(64, 158, 255, 0.8);
    }
  }
}
</style>
